<template>
  <div class="serveNo">
    <page-box class="serve-pagebox">
      <template #top>
        <alert-msg content="呼转号：员工手动发起呼叫转移（包括咨询转移）操作时，用于呼叫被转移方的号码。">
          <template #icon>
            <i class="MC_iconfont MC_icon-xinxi-mian"></i>
          </template>
        </alert-msg>
      </template>
      <template #search>
        <search-form class="search-form" :fieldList="fieldList" :form="form" @onSearchFun="search"></search-form>
      </template>
      <template #btn>
        <el-button type="default" class="search-btn" @click="search">查询</el-button>
      </template>
      <template #table>
        <resize-table
          :topHeight="104"
          :headers="tableHeaders"
          :data="tableData"
          :pagingData="pagingData"
          @onPageChange="handleCurrentChange"
          @onPageSizeChange="handleSizeChange"
          @onCheckHeadersChange="checkHeadersChange"
          :showPagination="true"
        >
          <template #status="{ scope }">
            <span v-if="scope.row.status === 1"><i class="success" />启用</span>
            <span v-else-if="scope.row.status === 0"><i class="fail" />停用</span>
          </template>
        </resize-table>
      </template>
    </page-box>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import searchForm from '@/common/components/base-form/form.vue'
import resizeTable from '@/common/components/resize-table/index.vue'
import pageBox from '@common/components/page-box.vue'
import alertMsg from '@common/components/alert/index.vue'
import { getCallTranferNo } from '@app/call-center/apis/number-manage'
import { userModule } from '@/common/store/modules/user'

export default defineComponent({
  name: 'explicitNo',
  components: {
    searchForm,
    resizeTable,
    pageBox,
    alertMsg
  },
  // ----------------生命周期-----------------------
  setup() {
    const USERMODULE = userModule()
    const state = reactive({
      fieldList: [
        {
          name: '呼转号',
          field: 'fuzzyQuery',
          type: 'text'
        },
        {
          name: '状态',
          field: 'status',
          type: 'dropdown',
          choices: [
            { label: '全部', value: '' },
            { label: '启用', value: '1' },
            { label: '停用', value: '0' }
          ]
        }
      ],
      form: {
        fuzzyQuery: null,
        status: null
      },
      tableHeaders: [
        { label: '呼转号码', prop: 'number', show: true },
        { label: '号码能力', prop: 'callAbilityName', show: true },
        { label: '状态', prop: 'status', show: true, custom: true }
      ],
      tableData: [],
      pagingData: {
        page: 1,
        total: 200,
        limit: 10
      },
      drawerShow: false
    })
    // 关闭抽屉
    const closeDraw = () => {
      state.drawerShow = false
    }

    // 关闭抽屉
    const cancelFun = () => {
      state.drawerShow = false
    }

    const handleCurrentChange = (page: number) => {
      state.pagingData.page = page
      getTableData()
    }

    const handleSizeChange = (size: number) => {
      state.pagingData.limit = size
      getTableData()
    }

    const search = () => {
      state.pagingData.page = 1
      getTableData()
    }

    // 获取表格数据
    const getTableData = () => {
      const sendData = {
        ...state.form,
        pageSize: state.pagingData.limit,
        pageNumber: state.pagingData.page,
        accountId: USERMODULE.accountId || '',
        callAbility: '4,5,6'
      }
      getCallTranferNo(sendData).then((res: any) => {
        if (res.success && res.data) {
          const list = res.data.list || []
          list.forEach((item: any) => {
            item.callAbilityName = getCallAbility(item.callAbility)
            item.statusName = item.status ? '启用' : '停用'
          })
          state.tableData = list
          state.pagingData.total = res.data.page.total || 0
        }
      })
    }

    // 号码能力
    const getCallAbility = (num: any) => {
      switch (num) {
        case 1:
          return '服务号'
        case 2:
          return '外显号'
        case 3:
          return '服务号/外显号'
        case 4:
          return '外呼呼转'
        case 5:
          return '呼入呼转'
        case 6:
          return '呼入/外呼呼转都支持'
      }
    }

    onMounted(() => {
      getTableData()
    })

    return {
      ...toRefs(state),
      closeDraw,
      cancelFun,
      search,
      handleCurrentChange,
      handleSizeChange
    }
  }
})
</script>

<style lang="stylus" scoped>
.serveNo
  :deep(.serve-pagebox)
    .box
      padding 16px 24px
  .edit,.delete
      color var(--mc-main-color)
      cursor pointer
  .el-alert
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px 16px;
      gap: 8px;
      width: 100%;
      height: 40px;
      background: linear-gradient(0deg, rgba(28, 97, 241, 0.1), rgba(28, 97, 241, 0.1)), #FFFFFF;
      border-radius: 4px;
      flex: none;
      order: 2;
      align-self: stretch;
      flex-grow: 0;
      font-size: 14px;
      line-height: 40px;
      letter-spacing: 0.001em;
      color: rgba(0, 0, 0, 0.88);
      :deep(.el-icon)
          color var(--mc-link-color)
  .fail, .success{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;

    &.fail {
      background: var(--mc-error-color);
    }

    &.success {
      background: var(--mc-success-color);
    }
  }
  :deep(.el-transfer-panel)
    width 220px
</style>
